<template>
	<view class="insure_conter">
		<!-- 头部盒子 -->
		<view class="herder_box">
			<view class="top_title">
				<text>家庭保障</text>
				<view class="right">
					<text>健康金</text>
					<view class="right_box">
						去领取
					</view>
				</view>
			</view>
			<view class="boo">
				<view class="boo_left">
					全部保障<text class="iconfont icon-right"></text>
				</view>
				<view class="aa">
					<text class="iconfont icon-jiahao">182.00元</text>
				</view>
			</view>
		</view>
		<!-- 保险分类 -->
		<view class="insure_type">
			<view class="box" v-for="item in type " :key="item.id">
				<view class="hh">
					<image :src="item.image" mode=""></image>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 轮播图片 -->
		<view class="lunbo">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/iamges/cc.png" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/iamges/cc.png" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 滑动模块-->
		<view class="hua">
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="scroll-view_box1" v-for="item in hua" :key="item.id">
							<text class="title">{{item.name}}</text>
							<view class="center">
								<text>{{item.tiele}}</text>
							</view>
						    <view class="price">
						    	<text>{{item.price}}</text>
						    </view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 精彩推荐 -->
		<view class="tuijian">
			<view class="top">
				<text>精彩推荐</text>
			</view>
			<view class="bottom">
				<!-- 头部 -->
				<view class="navbar">
					<view v-for="(item, index) in navList" :key="index"  class="bar " :class="tabCurrentIndex === index?'currn':'' " @click="tabClick(index)">
								{{ item.text }}
					</view>
				</view>
				<!-- 显示区域 -->
				<view class="list" v-for="(item, index) in navList" :key="index" v-if="tabCurrentIndex === index">
					<view class="list_list" v-for="list in item.orderList" :key="list.name">
						<view class="left">
							<image :src="list.img" mode="widthFix"></image>
						</view>
						<view class="right">
							<text class="top">{{list.top}}</text>
							<text class="bo">{{list.bo}}</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: [{
						id: 0,
						image: '../../static/iamges/car.png',
						name: '车险'
					},
					{
						id: 1,
						image: '../../static/iamges/xin.png',
						name: '健康险'
					},
					{
						id: 2,
						image: '../../static/iamges/b.png',
						name: '养老险'
					},
					{
						id: 3,
						image: '../../static/iamges/a.png',
						name: '意外险'
					},
					{
						id: 4,
						image: '../../static/iamges/c.png',
						name: '意外险'
					},
				],
				scrolls: true,
				hua:[
					{id:0,name:"惠通保—重大疾病保险计划",tiele:'1年期重疾险,保130种疾病',price:"￥4.9/月起  立即购买"},
					{id:1,name:"惠通保—重大疾病保险计划",tiele:'1年期重疾险,保130种疾病',price:"￥4.9/月起  立即购买"},
					{id:2,name:"惠通保—重大疾病保险计划",tiele:'1年期重疾险,保130种疾病',price:"￥4.9/月起  立即购买"},
				],
				tabCurrentIndex: 0,
				navList: [
							{
								state: 0,
								text: '推荐',
								orderList: [
									{id:0,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:1,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:2,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:3,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:4,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:5,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
								]
							},
							{
								state: 1,
								text: '成人',
								orderList: [
									{id:0,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:1,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:2,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
								]
							},
							{
								state: 2,
								text: '少儿',
								orderList: [
									{id:0,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									{id:1,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
									
								]
							},
							{
								state: 3,
								text: '老人',
								orderList: [
									{id:0,img:"../../static/iamges/list.png",top:"超医保—百万医疗险",bo:'￥11.72/月起'},
								
								]
							}
								
						]
			}
		},
		methods: {
           scroll() {
				console.log(123);
			},
		changeTab(e) {
					this.tabCurrentIndex = e.target.current;
				},
				//顶部tab点击
				tabClick(index) {
					this.tabCurrentIndex = index;
				}
		},
			onLoad(options) {
				// 页面显示是默认选中第一个
				this.tabCurrentIndex = 0;
			},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fafafa;
		box-sizing: border-box;
		
	}

	.insure_conter {
		background-color: #fafafa;
		padding: 16rpx;
		box-sizing: border-box;
        width: 100vw;
		.herder_box {
			height: 198rpx;
			border-radius: 15rpx;
			background-color: #ff4658;
			margin-top: 20rpx;

			.top_title {
				display: flex;

				justify-content: space-between;
				padding: 30rpx;
				color: #ffffff;
				font-size: 48rpx;

				.right {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right_box {
						font-size: 30rpx;
						border: 1px solid #fa8b95;
						border-radius: 10rpx;
						color: #fa8b95;
						margin-left: 30rpx;
					}
				}
			}

			.boo {
				color: #ffffff;

				display: flex;
				justify-content: space-between;
				padding: 0rpx 36rpx;

				.boo_left {
					color: #fa8b95;
				}

				.aa {
					margin-right: 60rpx;

					text {
						font-size: 40rpx;
					}
				}
			}
		}

		.insure_type {
			//border: 1px solid red;
			height: 153rpx;
			margin-top: 41rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			display: flex;

			.box {

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 20%;

				.hh {
					height: 50rpx;
					width: 56rpx;
					//border: 1px solid pink;
					display: flex;
					align-items: flex-end;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				text {
					margin-top: 15rpx;
					//border: 1px solid blue;
				}
			}
		}

		.lunbo {
			margin-top: 40rpx;
			height: 410rpx;

			swiper {
				height: 100%;
				border: 1px solid blue;
				border-radius: 15rpx;

				swiper-item {
					.swiper-item {
						image {
							width: 100%;
						}
					}
				}
			}
		}

		.hua {
			box-sizing: border-box;
			margin-top: 20rpx;
			.scroll-view_H {
				width: 100vw;
				//border: 1rpx solid red;
				height: 220rpx;
				// 滚动模块
				white-space: nowrap;
				.scroll-view_box1 {
					width: 444rpx;
					height: 220rpx;				
					// 让元素在一行显示
					display: inline-block;
					border-radius: 15rpx;
					margin-left: 20rpx;
					box-sizing: border-box;
					background-image: url("../../static/iamges/BX.png");
					padding: 20rpx;
					&:nth-child(1){
						margin-left: 0;
					}
					.title{
						color:  #ff4658;
						line-height: 60rpx;
						font-size: 24rpx;
					}
					 .center{
						 line-height: 60rpx;
						 font-size: 28rpx;
						 color: #333333;
					 }
					.price{
						text{
							border-radius: 20rpx;
							background-color: #ff4658;
							line-height: 60rpx;
							font-size: 28rpx;
							padding: 0 15rpx;
						}
					}
				}
			}
		}
		.tuijian{
			//border: 1px solid black;
			.top{
				padding: 20rpx 0;
				text{
					font-size: 40rpx;
					
				}
			}
			.bottom{
				background-color:#ffffff ;
				border-radius: 15rpx;
				padding: 20rpx;
				.navbar{
					//border: 1px solid red;
						
					display: flex;
					.bar{
						font-size: 50rpx;
						margin-left: 30rpx;
						&:nth-child(1){
							margin: 0;
						}
						&.currn{
						font-weight: bold;
					}
					}
				}
				.list{
					margin-top: 30rpx;
					.list_list{
						border-bottom: 1px solid #eeeeee;
						display: flex;
						padding: 22rpx 0;
						.left{
							width: 190rpx;
							image{
								width: 100%;
							}
						}
						.right{
							padding: 0;
							margin-left: 38rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							.top{
								font-size: 36rpx;
								color: #333333;
							}
							.bo{
								font-size: 36rpx;
								color: #ff4658;
							}
						}
					}
				}
								
			}
		}
			}
</style>
